<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>登录</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">

	<link rel="stylesheet" href="../css/mui.min.css">
	<link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
	<script src="../js/flexible.js" type="text/javascript" charset="utf-8"></script>
	<style>
		html,
		body {
			min-height: 100vh;
			background: #1c83fc;
		}

		ul,
		ol {
			list-style: none;
		}

		body input[type='text'],
		ul,
		li,
		input[type='password'] {
			padding: 0;
			margin: 0;
			border: 0;
			border-radius: 0;
		}

		:-moz-placeholder {
			/* Mozilla Firefox 4 to 18 */
			color: #fff;
			opacity: 1;
		}

		::-moz-placeholder {
			/* Mozilla Firefox 19+ */
			color: #fff;
			opacity: 1;
		}

		input:-ms-input-placeholder {
			color: #fff;
			opacity: 1;
		}

		.mui-bar {
			background: transparent;
		}

		input::-webkit-input-placeholder {
			color: #fff;
			opacity: 1;
		}

		.clear {
			clear: both;
			height: 0;
			font-size: 0;
			line-height: 0;
			visibility: hidden;
			overflow: hidden;
		}
		/*顶部*/
		/*登录表单*/

		.mui-content {
			background: transparent;
		}

		#logn_form {
			padding: 0 0.906rem;
			margin-top:1rem;
		}

		#logn_form .top {
			width: 2.613rem;
			height: 2.613rem;
			background: rgba(255, 255, 255, 0.5);
			margin: 0 auto;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 1.173rem;
		}

		#logn_form .top img {
			width: 2.08rem;
			height: 2.08rem;
			display: block;
		}

		#logn_form .inp {
			width: 100%;
			display: flex;
			align-items: center;
			height: 0.88rem;
			border-bottom: 2px solid #fff;
			margin-bottom: 0.5rem;
		}

		#logn_form .inp i {
			display: block;
			width: 0.56rem;
			height: 0.56rem;
			margin-right: 0.133rem;
			margin-left: 0.053rem;
		}

		#logn_form .inp .i_name {
			background: url(../images/logo_zh.png) no-repeat;
			background-size: 100% 100%;
		}

		#logn_form .inp .i_pwd {
			background: url(../images/logo_pwd.png) no-repeat;
			background-size: 100% 100%;
		}

		#logn_form .inp input {
			width: 7.4rem;
			height: 0.6rem;
			line-height: 0.6rem;
			border-left: 1px solid #fff;
			background: transparent;
			color: #fff;
			font-size: 0.453rem;
			text-indent: 0.266rem;
		}

		#logn_form .ckeck {
			text-align: center;
			margin-bottom: 0.2rem;
		}

		#logn_form .ckeck label {
			font-size: 0.293rem;
			color: #fff;
		}

		#logn_form .ckeck i {
			font-size: 0.293rem;
			color: #fff;
		}

		#logn_form .btn {
			width: 8rem;
			height: 1.066rem;
			line-height: 1.066rem;
			font-size: 0.52rem;
			color: #fff;
			text-align: center;
			background: rgba(255, 255, 255, 0.4);
			border-radius: 0.1rem;
			margin-bottom: 0.373rem;
		}

		#logn_form .txt {
			display: flex;
			justify-content: space-between;
		}

		#logn_form .txt a {
			font-size: 0.426rem;
			color: #fff;
			text-decoration: underline;
		}

		#logn_form .bottom {
			position: relative;
			top: 1rem;
			width: 8rem;
			text-align: center;
			color: #fff;
		 
		}

		#logn_form .bottom p {
			color: #fff;
			margin-bottom: 0.573rem;
			font-size: 0.426rem;
		}

		#logn_form .bottom .wx {
			width: 3.706rem;
			height: 0.786rem;
			display: flex;
			justify-content: center;
			align-items: center;
			border: 2px solid #fff;
			border-radius: 0.2rem;
			margin: 0 auto;
			
		}

		#logn_form .bottom .wx span {
			color: #fff;
		}

		#logn_form .bottom .wx i {
			font-size: 0.48rem;
			margin-left: 0.133rem;
		}

		.wx_login {
			text-align: center;
			padding-top: 20px;
		}

		.wx_login img {
			width: 20%;
		}
	</style>
</head>

<body>
	<!--顶部-->
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #fff;"></a>
		<h1 class="mui-title"></h1>
	</header>
	<div class="mui-content" id="app">
		<div id="logn_form">
			<div class="top">
				<img src="../images/logo_top.png" />
			</div>
			<div class="inp">
				<i class="i_name"></i>
				<input type="text" name="" id="text" value="" placeholder="手机号" v-model="phone" />
			</div>
			<div class="inp">
				<i class="i_pwd"></i>
				<input type="password" name="" id="password" value="" placeholder="密码" v-model="pwd" />
			</div>
			<div class="ckeck" id="ckeck">
				<input name="checkbox" value="Item" type="checkbox" style="display:none" id="checkbox">
				<i class="iconfont icon-zhengfangxuanze" id="i"></i>
				<label>记住登录密码</label>
			</div>
			<div class="btn" id="subbtn">
				登录
			</div>
			<div class="txt">
				<a href="register.html">立即注册</a>
				<a href="retrieve.html">忘记密码？</a>
			</div>
			<!--<div class="wx_login"><img src="../images/wx.png"/></div>-->
			<div class="bottom">
				<a href="register.html">
					<p>没有账号?点击快速注册</p>
				</a>
				<div class="wx" id="weixin_login">
					<span>微信登录</span>
					<i class="mui-icon mui-icon-weixin"></i>
				</div>
			</div>
		</div>
	</div>

	<script src="../js/mui.min.js"></script>
	<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/js.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/host.config.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/tools/util.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
		var vue = new Vue({
			el: '#app',
			data: {
				phone: '',
				pwd: '',
				checked: false
			},
			methods: {
				phones: function () {
					var phone = this.phone; //s\当前输入账号
					var user = Storage.get('usernumber'); //获取缓存账号
					//有值 循环 判断 相等取值
					if (user) {
						for (var i = 0; i < user.length; i++) {
							if (phone == user[i].phone) {
								this.pwd = user[i].pwd
							}

						}
					}
				},
				wx_login: function () {
					//					alert("点击了微信登陆")
				}
			},
			mounted: function () {
				if (Storage.get('usernumber')) {
					var user = Storage.get('usernumber'); //获取缓存账号
					this.phone = user.phone
					this.pwd = user.pwd
				}
				mui.plusReady(function () {
					console.log("weixin_login")
					document.getElementById("weixin_login").addEventListener("tap", function () {
						//微信登陆
						console.log("weixin_login2222")
						wx_login_fun()
					})
				})
				//mui初始化
				mui_init()
				//选择是否保存密码
				select_save_pass()
				//点击跳转事件初始化
				tap_event_init()
				//手机号登陆 初始化
				login_init()
			},

		})
		//微信登陆
		function wx_login_fun() {
			//获取第三方服务通道
			plus.oauth.getServices(function (services) {
				auths = services;
				 
				//第三方登陆
				authLogin(auths)
			}, function (e) {
				//				alert("获取分享服务列表失败：" + e.message + " - " + e.code);
			});
			//第三方登陆
			function authLogin(auths) {
				//				alert(JSON.stringify(auths));
				var s;
				//使用微信通道进行登陆
				for (var i = 0; i < auths.length; i++) {
					if (auths[i].id == "weixin") {
						s = auths[i]
					}
				}

				//				alert(JSON.stringify(s))
				 
				if (true) {

					s.login(function (e) {
						//						alert("成功获取用户信息-->" + JSON.stringify(e));
						//						alert("openid-->" + e.target.authResult.openid);
						//						alert("access_token-->" + e.target.authResult.access_token);

						//						alert("开始请求后台接口--> " + host_config.app_server + "/User/weixin");

						$.ajax({
							type: "post",
							url: host_config.app_server + "/User/weixin",
							data: {
								openid: e.target.authResult.openid,
								access_token: e.target.authResult.access_token
							},
							success: function (res) {
															 
							 
								res = JSON.parse(res)
								if (res.code == 1) {
									mui.toast("登陆成功");
									login_succ_save_info(res)
								}
								/*
								if(res){
									 $.ajax({
									 	type:"post",
									 	url:"https://zhapp.4hl.cn/app/User/wei",
									 	data:{
									 		info:res
									 	},
									 	success:function(res){
									 		if(res){
									 			res = JSON.parse(res);
									 			if(res.code==1){
									 				res.user.uid = res.user.id;
//									 				alert(JSON.stringify(res.user))
									 				// 将登陆成功的用户信息 存入缓存
									 				login_succ_save_info(res)
									 				mui.toast("登陆成功");
									 				
									 			}
									 		}
									 	},
									 	error:function(err){
									 		mui.toast("服务器错误")
									 	}
									 });
								}
								*/


							},
							error: function (err) {
								alert(JSON.stringify(err))

							}
						});

					}, function (e) {
						//						alert(JSON.stringify(e))

						alert("登录认证失败！");
					});
				} else {
					//					alert("已经登录认证！");
				}
			}
		}
		//mui初始化
		function mui_init() {
			//mui初始化
			mui.init({
				swipeBack: false,
				beforeback: function () { //监听物理返回按键的方法
					console.log('触发了  返回键')　　　　　　
					mui.openWindow({
						url: 'index.html',
						id: 'idnex.html',
						show: {
							autoShow: true, //页面loaded事件发生后自动显示，默认为true
							aniShow: "slide-in-left", //页面显示动画，默认为”slide-in-right“；

						},
					});
					return false;
				}
			});

		}
		//选择是否保存密码
		function select_save_pass() {
			mui('#ckeck').on('change', 'input', function () {
				var checked = this.checked
				var i = document.querySelector('#i')
				if (checked) {
					console.log(1111)
					i.classList.remove('icon-zhengfangxuanze')
					i.classList.add('icon-zhengfangxuanzegou')
					//setCookie('checked','true',300)
					vue.checked = true
				} else {
					console.log(2222)
					i.classList.remove('icon-zhengfangxuanzegou')
					i.classList.add('icon-zhengfangxuanze')
					//setCookie('checked','false',300)
					vue.checked = false
				}
			})
		}
		//点击跳转事件初始化
		function tap_event_init() {

			mui('.mui-content').on('tap', 'a', function () {
				var href = this.getAttribute('href');
				mui.openWindow({
					url: href,
					id: "",
				});
			})
		}
		//手机号登陆 初始化
		function login_init() {
			var btn = document.getElementById('subbtn');
			btn.addEventListener('tap', function () {
				var text = mui('#text')[0].value;
				var password = mui('#password')[0].value;
				//loading.on()
				mui.post(url + "api/User/checkLogins", {
					phone: text,
					pwd: password
				}, function (response) {

					var responseData = JSON.parse(response)
					console.log(responseData)
					if (responseData == '2') {
						mui.toast("登录失败(未注册)")
						return false;
					}

					if (responseData.code == '1') {
						login_succ_save_info(responseData)
					} else {
						mui.toast("密码错误！")
					}
				})
			})
		}

		function login_succ_save_info(responseData) {
			var user = responseData.user;
			//  设置默认用户昵称为手机号  20180702 by yb
			if (user.nickname == "" || user.nickname == null) {
				user.nickname = user.phone
			}
			//  设置默认用户头像为默认头像  20180702 by yb
			if (user.head == null || user.head == "") {
				user.head = "../images/user_defult.jpg"
			}
			if (window.plus) {
				// 重载上级页面
				plus.webview.currentWebview().opener().reload();
			}

			host_config.localStorage.setItem(host_config.user, JSON.stringify(user));

			var arr = {
				"name": user.comyname,
				"bid": user.comyid,
				'sqid': user.comyid,
			}
			//						if (Storage.get('usernumber')) {
			//							console.log('有值')
			//							var user = Storage.get('usernumber'); //x\获取用户账号密码
			//						} else {
			//							console.log('无值')
			//							var user = []
			//						}
			if (vue.checked == true) {
				var number = {
					'phone': text,
					'pwd': password
				}
				localStorage.setItem('usernumber', JSON.stringify(number))
				//setCookie('user',JSON.stringify(user),300)
			}
			setCookie('checked', vue
				.checked, 300)
			localStorage.setItem('address', JSON.stringify(arr))
			//取cookie 转 数组 在转 对象
			//						var user = JSON.parse(getCookie('user').split())
			//						console.log(user)
			mui.openWindow({
				url: 'index.html',
				id: 'index.html',
				createNew: true
			});
		}
	</script>
</body>

</html>
